<template>
    <div class="contentar reportMain">
        <div class="whiteBg choiceSty">
            <div class="flex mb20">
                <div class="w50 navBtm center borderBlue colorBlue" @click="goCheckNav(1)" :class="{'blueBg colorfff':activeNav==1}">按天</div>
                <div class="w50 navBtm center borderBlue colorBlue"  style="margin:0 -1px" @click="goCheckNav(2)" :class="{'blueBg colorfff':activeNav==2}">按月</div>
                <div class="w50 navBtm center borderBlue colorBlue" @click="goCheckNav(3)" :class="{'blueBg colorfff':activeNav==3}">按年</div>
            </div>
            <div class="flex flexCenter alignCenter ">
                <img src="../../assets/image/sub.png" style="width:0.4rem"  @click="goSub" />
                <div style="margin:0 0.3rem" class="fontbold fontSize16 flex alignCenter" @click="goCheckTime">{{activeAllDate}}</div>
                <img src="../../assets/image/add.png" style="width:0.4rem" @click="goAdd" >
            </div>
            <!-- <div class="flex flexCenter alignCenter ">
                <span class="fontSize12 " style="background:rgba(83, 114, 192, 0.1);padding:0.06rem 0.2rem">前一天</span>
                <div style="margin:0 0.3rem" class="fontbold fontSize16 flex alignCenter" @click="goCheckTime">{{activeAllDate}}</div>
                <span class="fontSize12 color999" style="background:rgba(83, 114, 192, 0.1);padding:0.06rem 0.2rem">后一天</span>
            </div> -->
            <!-- <div class="navContent flex flexCenter alignCenter" @click='goCheckDate' v-show="activeNav==1">
                <div class="fontSize16 fontbold">{{activeDate}}</div> 
                <span class="arrowSty"></span>
            </div>
            <div class="navContent flex flexCenter alignCenter" @click='goCheckMonth' v-show="activeNav==2">
                <div class="fontSize16 fontbold">{{activeMonth}}</div> 
                <span class="arrowSty"></span>
            </div>
            <div class="navContent flex flexCenter alignCenter" @click='goCheckMonth' v-show="activeNav==3">
                <div class="fontSize16 fontbold">{{activeYear}}</div> 
                <span class="arrowSty"></span>
            </div> -->
        </div>
        
        <div class="reportTotalSty">
            <!-- <div class="flex flexBetween samePeriodNav">
                <div class="blueBorder colorBlue">同期提升比</div>
                <div class="grayBorder">同期同店提升比</div>
            </div> -->
            <div class="contentLayout whiteBg">
                <div class="subTitle mt4 flex alignCenter">
                    <div class="h4 fontSize16 fontbold">销售总和(万)</div>
                    <div class="fontSize16 colorBlue fontbold mr10 ml10">{{allData.num}}</div>
                    <div class="fontSize12" :class="{'colorGreen':allData.ratio<0,'colorRed':allData.ratio>0}">{{allData.ratio}}<span v-if="allData.ratio!==''">%</span></div>
                    <van-icon name="down" v-if="allData.ratio!=0" :class="{'colorGreen':allData.ratio<0,'colorRed rotate180':allData.ratio>0}"/>
                </div>
                <div class="listContent">
                    <div class="w33 disInline center" v-for='(item,index) in reportInfo.total' :key="index" @click='getBrandHasArea(item.brandId,item.tit,item.id)'>
                        <div class="fontbold fontSize12">{{item.tit}}</div>
                        <div class="colorBlue mt5 fontSize16">{{item.num}}</div>
                        <div class="flex flexCenter alignCenter">
                            <div class="fontSize12" :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">{{item.ratio===''?'-':item.ratio+'%'}}</div>
                            <van-icon name="down" v-if="item.ratio!=0" :class="{'colorGreen':item.ratio<0,'colorRed rotate180':item.ratio>0}"/>
                        </div>
                        
                    </div>
                </div>            
            </div>
            <div class="contentLayout whiteBg">
                <div class="subTitle">
                    <span class="fontSize16 fontbold">渠道销售额同期比</span>
                    <!-- <span class="fontSize13"> 同期提升比</span> -->
                </div>
                <div class="flex center" v-show="channelTitle.length>0">
                    <div class="w22">
                        <div class="brandName fontSize14">渠道/品牌</div>
                        <div class="flex alignCenter flexCenter fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in channelTitle" :key="index">{{item.name}}</div>
                    </div>
                    <div v-for="(item,index) in channelList" :key="index" class="flex1">
                        <div class="brandName fontSize14 fontbold">{{item.name}}</div>
                        <div v-for="(el,elindex) in item.user" :key="elindex" class="H50 flex flexColumn flexCenter" @click="goSubLink(el.brand_id,el.channel_id,el.brand_name)">
                            <div class="colorBlue fontbold fontSize14">{{el.num}}</div>
                            <div>
                                <span class="fontSize12" :class="{'colorGreen':el.rate<0,'colorRed':el.rate>0}">{{el.rate_text}}</span>
                                <van-icon name="down" v-if="el.rate!=0" :class="{'colorGreen':el.rate<0,'colorRed rotate180':el.rate>0}"/>
                            </div>
                            <!-- <div class="flex flexCenter alignCenter fontSize12" v-if="el.ratio!=''" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">
                                <span>{{el.ratio}}<span v-if="el.ratio">%</span></span>
                                <van-icon name="down"  v-if="el.ratio" :class="{'rotate180':el.ratio>0}"/>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contentLayout whiteBg" v-if="activeNav>1">
            <div class="subTitle">
                <span class="fontSize18 fontbold">渠道销售额同期同店比</span>
                <!-- <span class="fontSize13"> 同期提升比</span> -->
            </div>
            <div class="flex center" v-show="channelTitle.length>0">
                <div class="w22">
                    <div class="brandName fontSize14">渠道/品牌</div>
                    <div class="flex alignCenter flexCenter fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in channelTitle" :key="index">{{item.name}}</div>
                </div>
                <div v-for="(item,index) in channelList" :key="index" class="flex1">
                    <div class="brandName fontSize14 fontbold">{{item.name}}</div>
                    <div v-for="(el,elindex) in item.user" :key="elindex" class="H50 flex flexColumn flexCenter" @click="goSubLink(el.brand_id,el.channel_id,el.brand_name)">
                        <div class="colorBlue fontbold fontSize14">{{el.num}}</div>
                        <div v-if="activeNav==2">
                            <span class="fontSize12" :class="{'colorGreen':el.source_data.thisMonthSameDepotLiftRate<0,'colorRed':el.source_data.thisMonthSameDepotLiftRate>0}">{{el.source_data.thisMonthSameDepotLiftRateText}}</span>
                            <van-icon name="down" v-if="el.source_data.thisMonthSameDepotLiftRate!=0" :class="{'colorGreen':el.source_data.thisMonthSameDepotLiftRate<0,'colorRed rotate180':el.source_data.thisMonthSameDepotLiftRate>0}"/>
                        </div>
                        <div v-if="activeNav==3">
                            <span class="fontSize12" :class="{'colorGreen':el.source_data.thisYearSameDepotLiftRate<0,'colorRed':el.source_data.thisYearSameDepotLiftRate>0}">{{el.source_data.thisYearSameDepotLiftRateText}}</span>
                            <van-icon name="down" v-if="el.source_data.thisYearSameDepotLiftRate!=0" :class="{'colorGreen':el.source_data.thisYearSameDepotLiftRate<0,'colorRed rotate180':el.source_data.thisYearSameDepotLiftRate>0}"/>
                        </div>
                        <!-- <div class="flex flexCenter alignCenter fontSize12" v-if="el.ratio!=''" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">
                            <span>{{el.ratio}}<span v-if="el.ratio">%</span></span>
                            <van-icon name="down"  v-if="el.ratio" :class="{'rotate180':el.ratio>0}"/>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="contentLayout whiteBg">
            <div class="fontSize18 subTitle fontbold">会员相关指标</div>
            <div class="flex center" v-show="reportInfo.user.length>0">
                <div class="w22">
                    <div class="brandName fontSize14">指标/品牌</div>
                    <div class="flex alignCenter flexCenter fontSize13 H50 lineH50 tableHTitleBg" v-for="(item,index) in userTitle" :key="index">{{item.name}}</div>
                </div>
                <div v-for="(item,index) in reportInfo.user" :key="index" class="flex1">
                    <div class="brandName fontSize14 fontbold">{{item.name}}</div>
                    <div v-for="(el,elindex) in item.user" :key="elindex" class="H50 flex flexColumn flexCenter">
                        <div class="colorBlue fontbold fontSize14">{{el.num}}</div>
                        <!-- <div class="flex flexCenter alignCenter fontSize12" v-if="el.ratio!=''" :class="{'colorGreen':el.ratio<0,'colorRed':el.ratio>0}">
                            <span>{{el.ratio}}<span v-if="el.ratio">%</span></span>
                            <van-icon name="down"  v-if="el.ratio" :class="{'rotate180':el.ratio>0}"/>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <van-calendar class="" v-model="isShowDate" :min-date="minDate" :max-date="maxDate" color="#4873c1" @confirm="onConfirmDate" />
        <van-popup v-model="isShowMonth" round position="bottom">
            <van-datetime-picker
                v-model="monthSty"
                type="year-month"
                title="选择年月"
                :min-date="minMonth"
                :max-date="maxMonth"
                :formatter="formatter"
                @confirm="onConfirmMonth"
                @cancel="onCancelDate"
            />
        </van-popup>
    </div>
</template>
<script>
import {GetQueryStr,getDate} from '@/common/common.js'
// import {getDate} from '@/common/common.js'

import { Toast,DatetimePicker} from 'vant'
// Vue.use(DatetimePicker);
// import VConsole from 'vconsole'
// var vConsole = new VConsole();  getChannelReport
export default {
    name:'report',
    data(){
        return{
            activeNav:'',
            isShowDate:false,
            isShowMonth:false,
            minDate:'',
            maxDate:'',
            activeDate:'',
            activeMonth:'',
            activeYear:'',
            monthSty:'',
            minMonth:new Date(2020, 0, 1),
            maxMonth:new Date(2025, 10, 1),
            day:'',
            month:'',
            reportInfo:{
                user:[],
                total:[]
            },
            userTitle:[],
            allData:{},
            channelList:[],
            channelTitle:[],
            activeAllDate:'',
            nowdate:'',
            preDate:'',
            nowMonthSty:'',
            nowYearSty:''
        }
    },
    created(){
        let requestId=GetQueryStr('requestId')
        let loid=localStorage.getItem('requestId')
        if(loid===null){//第一次进
            console.log('loid=====为Null')
            localStorage.removeItem('activeDate')
            localStorage.setItem('requestId',requestId)
            localStorage.removeItem('activeMonth')
            localStorage.removeItem('activeNav')
            localStorage.removeItem('activeAllDate')
            this.activeNav=1
        }else{
            if(loid != requestId){
                console.log('清掉')
                localStorage.removeItem('activeDate')
                localStorage.setItem('requestId',requestId)
                localStorage.removeItem('activeMonth')
                localStorage.removeItem('activeNav')
                localStorage.removeItem('activeAllDate')
                this.activeNav=1
            }
            
        }
        var date=new Date()
        //前一天
        var preDate=new Date(date.getTime() - (24*60*60*1000))
        console.log('preDate-----',preDate)
        let year=preDate.getFullYear()
        let month=preDate.getMonth() + 1
        let day= preDate.getDate()
        month<10?month='0'+month: ''
        day<10?day='0'+day: ''
        
        this.preDate=(date.getTime() - (24*60*60*1000))
        this.nowMonthSty=`${year}-${month}`
        this.nowYearSty=`${year}`
        // console.log('昨天的日期----',this.activeAllDate)
        // console.log('昨天的日期-- this.preDate--', this.preDate)
        // this.activeMonth=`${year}-${month}`
        this.monthSty=preDate
        // localStorage.setItem('activeMonth',this.activeMonth)
        
        //当天
        let nowMonth=date.getMonth() + 1
        let nowDay=date.getDate()
        nowMonth<10?nowMonth='0'+nowMonth: ''
        nowDay<10?nowDay='0'+nowDay: ''
        let nowdate=`${date.getFullYear()}-${nowMonth}-${nowDay}`
        console.log('现在的时间',nowdate)
        this.nowdate=nowdate

        let activeDate=localStorage.getItem('activeDate')
        console.log('缓存时间activeDate',activeDate)
         
        let activeNav= localStorage.getItem('activeNav')
        if(activeNav){
            // localStorage.setItem('activeNav',activeNav)
            let activeAllDate= localStorage.getItem('activeAllDate')
            this.activeAllDate=activeAllDate
            this.activeNav=activeNav
            if(activeNav==1){//按天
                let currentDate=localStorage.getItem('currentDate')
                if(currentDate){//如果缓存了当天时间
                    if(currentDate==nowdate){//同一天
                        console.log('同一天',currentDate)
                        // this.activeDate=activeDate
                        let dateList=this.activeAllDate.split('-')
                        console.log('dateList',dateList)
                        this.day=dateList[2]
                        this.month=dateList[1]

                    }else{//已经过了一天
                        this.day=day
                        this.month=month
                        this.activeAllDate=`${year}-${month}-${day}`
                        localStorage.setItem('activeAllDate',this.activeAllDate)
                    }
                }else{
                    localStorage.setItem('currentDate',nowdate)
                    // this.activeDate=`${year}-${month}-${day}`
                    this.activeAllDate=`${year}-${month}-${day}`
                    // localStorage.setItem('activeDate',this.activeDate)
                    localStorage.setItem('activeAllDate',this.activeAllDate)
                    this.day=day
                    this.month=month
                }
            }
            if(activeNav==2){
                this.monthSty=new Date(this.activeAllDate)
            }

        }else{
            this.activeNav=1
            this.activeAllDate=`${year}-${month}-${day}`
            localStorage.setItem('activeNav',this.activeNav)
            localStorage.setItem('activeAllDate',this.activeAllDate)
            localStorage.setItem('currentDate',nowdate)//当前时间
            this.day=day
            this.month=month

        }



        // if(activeNav){//如果缓存了头部选项卡
        //     localStorage.setItem('activeNav',activeNav)
        //     this.activeNav=activeNav
            
        //     console.log('----------缓存了activeNav---------',activeNav)
        //     let activeMonth=localStorage.getItem('activeMonth')
        //     if(activeMonth){
        //         this.activeMonth=activeMonth
        //     }
            
        //     if(activeDate){//缓存了选择时间
        //         let currentDate=localStorage.getItem('currentDate')
        //         if(currentDate){//如果缓存了当天时间
        //             if(currentDate==nowdate){//同一天
        //                 console.log('同一天',currentDate)
        //                 this.activeDate=activeDate
        //                 let dateList=activeDate.split('-')
        //                 console.log('dateList',dateList)
        //                 this.day=dateList[2]
        //                 this.month=dateList[1]
        //             }else{//已经过了一天
        //                 this.activeDate=`${year}-${month}-${day}`
        //                 localStorage.setItem('activeDate',this.activeDate)
        //                 this.day=day
        //                 this.month=month
        //                 localStorage.setItem('currentDate',nowdate)
        //                 console.log('已经过了一天了，现在是第二天',nowdate)
        //             }
        //         }else{
        //             localStorage.setItem('currentDate',nowdate)
        //             this.activeDate=`${year}-${month}-${day}`
        //             localStorage.setItem('activeDate',this.activeDate)
        //             this.day=day
        //             this.month=month
        //         }
        //     }else{
        //         this.activeDate=`${year}-${month}-${day}`
        //         localStorage.setItem('activeDate',this.activeDate)
        //         this.day=day
        //         this.month=month
        //         localStorage.setItem('currentDate',nowdate)
        //         console.log('第一次进缓存现在的时间',nowdate)
        //     }
        // }else{
        //     // this.activeNav=activeNav
        //     console.log('没有缓存',activeNav)
        //     this.activeNav=1
        //     this.activeDate=`${year}-${month}-${day}`
        //     localStorage.setItem('activeDate',this.activeDate)
        //     localStorage.setItem('activeNav',this.activeNav)
        //     this.day=day
        //     this.month=month
        //     localStorage.setItem('currentDate',nowdate)
        //     console.log('第一次进缓存现在的时间',nowdate)
        // }
        
        // this.activeNav==1?this.activeAllDate=`${year}-${month}-${day}`:''
        // this.activeNav==2?this.activeAllDate=`${year}-${month}`:''
        // this.activeNav==3?this.activeAllDate=`${year}`:''
        // console.log('activeAllDate',this.activeAllDate)

        this.minDate=new Date(2020, 0, 1)
        this.maxDate=new Date(year, preDate.getMonth(), day)
        this.minMonth=new Date(2021, 0, 1)
        this.maxMonth=new Date(year, preDate.getMonth(), day)
        

        let token=GetQueryStr('token')
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }
        this.getChannelReport()
        this.getReportData()
    },
    methods:{
        goCheckTime(){
            console.log('hahh')
            if(this.activeNav=='1'){
                this.isShowDate=true
            }
            if(this.activeNav=='2'){
                this.isShowMonth=true
            }
        },
        getChannelReport(){
            let obj={
                date:this.activeAllDate
                // date:this.activeNav==1?this.activeDate:this.activeMonth
            }
            console.log('obj----',obj)
            this.$apiRequest.getChannelReport(obj).then(res=>{
                console.log('报表渠道',res)
                if(res.code==1){
                    this.channelList=res.data
                    this.channelTitle=res.data[0].user
                }
            })
        },
        goCheckNav(type){
            this.activeNav=type
            localStorage.setItem('activeNav',this.activeNav)
            var date=new Date()
            var preDate=new Date(date.getTime() - (24*60*60*1000))
            let year=preDate.getFullYear()
            let month=preDate.getMonth() + 1
            let day= preDate.getDate()
            month<10?month='0'+month: ''
            day<10?day='0'+day: ''

            if(this.activeNav==1){
                // this.activeDate=`${year}-${month}-${day}`
                // localStorage.setItem('activeDate',this.activeDate)
            }
            if(this.activeNav==2){
                // this.activeMonth=`${year}-${month}`
                // this.monthSty=new Date(this.activeMonth)
                // localStorage.setItem('activeMonth',this.activeMonth)
                this.monthSty=new Date(`${year}-${month}`)
                console.log('monthSty点击切换',this.monthSty)
            }

            this.activeNav==1?this.activeAllDate=`${year}-${month}-${day}`:''
            this.activeNav==2?this.activeAllDate=`${year}-${month}`:''
            this.activeNav==3?this.activeAllDate=`${year}`:''
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getChannelReport()
            this.getReportData()
        },
        goAdd(){//加
            let cc=''
            if(this.activeNav=='1'){//年月日
                let aa=new Date(this.activeAllDate) * 1
                let bb= aa + (24*60*60*1000)
                cc=getDate(bb,3,'-')
                if(bb === this.preDate || bb > this.preDate){
                    Toast('不能再添加了')
                    return
                }
                this.activeAllDate=cc
            }
            if(this.activeNav=='2'){
                let newArr=this.activeAllDate.split('-')
                let yearSty=newArr[0]
                let monthSty=newArr[1]
                let newYear=''
                let newMonth=''
                if(monthSty == 12){
                    if(yearSty==2022 || yearSty > 2022){
                        Toast('不能再添加了')
                        return
                    }else{
                        newYear= (+yearSty + 1)
                        newMonth=1
                    }
                }else{
                    let aa=new Date(this.activeAllDate) * 1
                    let bb=new Date(this.nowMonthSty) * 1
                    if(aa == bb || aa > bb){
                        Toast('不能再添加了')
                        return
                    }
                    newYear = newArr[0]
                    newMonth = (+monthSty + 1)
                }
                newMonth<10?newMonth='0'+newMonth: ''
                this.activeAllDate=`${newYear}-${newMonth}`
                
            }
            if(this.activeNav=='3'){
                if(this.activeAllDate==2022){
                    Toast('最晚时间到2022年')
                    return
                }
                this.activeAllDate = +(this.activeAllDate + 1)
            }
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getReportData()
            this.getChannelReport()
        },
        goSub(){
            if(this.activeNav=='1'){
                let aa=new Date(this.activeAllDate) * 1
                let bb= aa - (24*60*60*1000)
                let cc=getDate(bb,3,'-')
                // console.log('cc',cc)
                this.activeAllDate=cc
            }
            if(this.activeNav=='2'){
                let newArr=this.activeAllDate.split('-')
                let yearSty=newArr[0]
                let monthSty=newArr[1]
                let newYear=''
                let newMonth=''
                if(monthSty== 1){
                    if(yearSty==2020 || yearSty < 2020){
                        Toast('不能再往前了')
                        return
                    }else{
                        newYear= (+yearSty - 1)
                        newMonth=12
                    }
                }else{
                    newYear = newArr[0]
                    newMonth = (+monthSty - 1)
                }
                newMonth<10?newMonth='0'+newMonth: ''
                this.activeAllDate=`${newYear}-${newMonth}`
            }
            if(this.activeNav=='3'){
                if(this.activeAllDate==2020){
                    Toast('最早时间到2020年')
                    return
                }
                this.activeAllDate = +(this.activeAllDate - 1)
            }
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getReportData()
            this.getChannelReport()
        },
        goCheckDate(){
           this.isShowDate=true 
           this.getReportData()
        },
        goCheckMonth(){
            this.isShowMonth=true
            
        },
        formatter(type, val) {
            if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            }
            return val;
        },
        
        getBrandHasArea(id,brandName){//判断是否有区域
            let that=this
            this.$apiRequest.getBrandHasArea({brandId:id}).then(res=>{
                console.log('行政区域',res)
                if(res.code==1){
                    let url=''
                    // res.data?url='dailySalesWarehouse':url='areaReportDetail'
                    // this.$router.push({name:url,query:{id:id,date:this.activeDate,day:this.day,month:this.month,brandName:brandName}})
                    //date:this.activeDate
                    let obj={id:id,date:this.activeAllDate,day:this.day,month:this.month,brandName:brandName,activeNav:this.activeNav}
                    console.log('这是有obj',obj)
                    if(res.data){
                        if(id==15 || id==80){
                            console.log('这是sp和ed',id)
                            that.activeNav==1?url='dailySalesWarehouse':url='monthSalesWarehouse'
                        }else{
                           url='classifyTotal' 
                        }
                        
                    }else{
                        url='areaReportDetail'
                    }
                    //that.activeNav==1?obj.date=this.activeDate:obj.date=this.activeMonth
                    this.$router.push({name:url,query:obj})
                }
            })
        },
        goSubLink(brandId,channelId,brandName){

            let url='' //date:this.activeDate
            let obj={id:brandId,date:this.activeAllDate,day:this.day,month:this.month,brandName:brandName,activeNav:this.activeNav,channelId:channelId}
            this.activeNav==1?url='dailySalesWarehouse':url='monthSalesWarehouse'
            this.$router.push({name:url,query:obj})
        },
        getReportData(){
            let obj={
                year:0,
                month:0,
                week:0,
                day:this.activeAllDate
                // day:this.activeDate
            }
            if(this.activeNav==1){
                obj.year=0
                obj.month=0
                obj.week=0
            }
            if(this.activeNav==2){
                let dateStr=this.activeMonth.split('-')
                obj.year=dateStr[0]
                obj.month=dateStr[1]
                obj.day=''
            }
            Toast.loading({
                message: '加载中',
                forbidClick: true,
                duration:0
            })
            console.log('obj--',obj)
            this.$apiRequest.getReportData(obj).then(res=>{
                console.log('获取报表',res)
                if(res.code==200){
                    this.allData=res.data.total.pop()
                    this.reportInfo=res.data
                    
                    this.userTitle=res.data.user[0].user
                }
                Toast.clear()
            })
        },
        goLink(id){
            this.$router.push({name:'dailySalesWarehouse',query:{id:id,date:this.activeDate,day:this.day,month:this.month}})
        },  
        
        onConfirmDate(date){//具体日期
            console.log('选择了日期',date)
            this.isShowDate=false 
            let month=date.getMonth() + 1
            let day= date.getDate()
            month<10?month='0'+month: ''
            day<10?day='0'+day: ''
            this.day=day
            this.month=month
            this.activeDate=`${date.getFullYear()}-${month}-${day}`
            localStorage.setItem('activeDate',this.activeDate)
            this.activeAllDate=`${date.getFullYear()}-${month}-${day}`
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getChannelReport()
            this.getReportData()
        },
        onConfirmMonth(date,val){
            console.log('activeAllDate--------------',this.activeAllDate)
            console.log('确定月份---',date)
            let year=date.getFullYear()
            let month=date.getMonth() + 1
            // let day= date.getDate()
            console.log('year---',year)
            console.log('month---',month)
            this.isShowMonth=false
            month<10?month='0'+month: ''
            // day<10?day='0'+day: ''
            // this.activeMonth=`${year}-${month}`
            // localStorage.setItem('activeMonth',this.activeMonth)
            // this.activeAllDate=`${date.getFullYear()}-${month}-${day}`
            this.monthSty=new Date(`${year}-${month}`)
            this.activeAllDate=`${date.getFullYear()}-${month}`
            localStorage.setItem('activeAllDate',this.activeAllDate)
            this.getChannelReport()
            this.getReportData()
        },
        onCancelDate(){
            this.isShowMonth=false
        }
    },
}
</script>
<style>
.navContent.van-dropdown-menu__bar{
    background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228));
} 
.reportMain .van-overlay,.reportMain .van-popup{
    max-width: 8rem;
    position: fixed;
    left:50%;
    transform: translateX(-50%);
}
</style>
<style lang='less' scoped>
.choiceSty{
    width: 92%;
    margin: 0 auto 0.2rem auto;
    padding: 0.2rem;
    border-radius: 0.2rem;
    // background: rgba(83, 114, 192,0.1);
    .navBtm{
        padding: 0.14rem 0;
    }
}
.blueBg{
    background-color: #4873c1;
}
.borderBlue{
    border:1px #4873c1 solid
}
.contentar{
    background-color: #f1f1f1;
    padding: 0.4rem 0;
    .w50{
        width: 50%;
    }
    .w22{width: 22%;}
    .H50{
        height: 1rem;
        border: 1px #eee solid;
        margin-left: -1px;
        margin-top: -1px;
    }
    .rotate180{transform: rotate(180deg);}
    .navContent{
        // background: linear-gradient(rgb(101, 110, 192), rgb(142, 176, 228));
        width: 92%;
        margin: 0 auto 0 auto;
        padding: 0.2rem 0;
        border-radius: 0.1rem;
        // border: 1px #ddd solid;
    }
    .tableHTitleBg {
        background-color: #f5f7fa;
    }
    .brandName{
        margin-left: -1px;
        margin-top: -1px;
        background-color: #f5f7fa;
        // height: 0.6rem;
        padding: 0.2rem 0;
        border: 1px #eee solid;
    }
    .w33{
        width: 33.333333%;
        padding: 0.24rem 0;
        border:1px #eee solid;
        margin-left: -1px;
        margin-top: -1px;
    }
    .contentLayout{
        width: 92%;
        margin: 0 auto 0.4rem auto;;
        padding: 0 0 0.2rem 0;
        border-radius: 0.2rem;
    }
    .listContent{
        .w33:nth-child(3n){
            border-right:none !important
        }
        .w33:nth-child(3){
            border-right:1px #eee solid !important;
        }
        
    }
    .subTitle{
        padding: 0.2rem;
        border-bottom: 1px #eee solid;
    }
    .borderRight{border-right:1px #eee solid}
    .borderBtm{border-bottom:1px #eee solid}
    .borderTop{border-top:1px #eee solid}
}
.arrowSty{
    display: block;
    width: 0;
    height: 0;
    border:0.12rem solid transparent;
    // border-top-color: #4873c1;
    border-top-color: #f1f1f1;
    position: relative;
    top: 0.06rem;
    margin-left: 0.06rem;
}
.reportTotalSty{
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    border-radius: 0.2rem;
    .samePeriodNav{
        width:70%;
        margin: 0 auto;
        padding-top: 0.3rem;
    }
    .grayBorder{
        border-bottom: 1px #ddd solid;
        padding-bottom: 0.1rem;
    }
    .blueBorder{
        border-bottom: 1px #4873c1 solid;
        padding-bottom: 0.1rem;
    }
}

</style>
